<template>
  <section>
    <el-card>
      <el-col class="toolbar">
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="search.code" placeholder="编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="search.amount_begin" placeholder="金额从"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="search.amount_end" placeholder="金额到"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="search.username" placeholder="商户"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--列表-->
      <el-table :data="page.rows" highlight-current-row stripe border v-loading="listLoading">
        <el-table-column prop="code" label="编号" width="240"></el-table-column>
        <el-table-column prop="orderCode" label="订单号" width="240"></el-table-column>
        <el-table-column prop="amount" label="金额" width="120px"></el-table-column>
        <el-table-column prop="subjectText" label="类型" width="80"></el-table-column>
        <el-table-column prop="username" label="商户"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column inline-template label="操作" width="80">
          <span>
                <el-button class="el-icon-information"  size="small" @click="handleDetail(row)" title="查看订单详情">
                </el-button>
            </span>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-col :span="24" class="toolPage">
        <el-pagination :current-page="page.current" :page-sizes="[10, 20, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
          :total="page.total" style="float:right" @size-change="handleSizeChange" @current-change="handlePageChange">
          </el-pagination>
      </el-col>
    </el-card>
  </section>
</template>

<script>
  export default {
    beforeMount() {
      this.loadGridData()
    },
    data() {
      return {
        page: {
          total: 0,
          current: 1,
          size: 10,
        },
        search: {
          code: '',
          amount_begin: '',
          amount_end: '',
          username: '',
        },
        listLoading: true
      }
    },
    methods: {
      handleSizeChange(size) {
        this.page.size = size,
          this.loadGridData()
      },
      handlePageChange(current) {
        this.page.current = current,
          this.loadGridData()
      },
      loadGridData() {
        this.listLoading = true
        let param = {
          pageSize: this.page.size,
          page: this.page.current,
          code: this.search.code,
          amountBegin: this.search.amount_begin,
          amountEnd: this.search.amount_end,
          username: this.search.username,
        }
        this.axios.get("/transactions", { params: param }).then(response => {
          this.page = response.data,
            this.listLoading = false
        })
      },
      handleSearch() {
        this.loadGridData()
      },
      handleDetail(row) {
        this.$router.push(`/transactions/${row.id}`)
      },
    }
  }

</script>